{include file="public/header" title="登录页-<?php echo request()->pc_info['seo_title']?>"/}
<link rel="stylesheet" href="/static/css/login.css" media="all">
<div class="login-body">
    <div class="login-main">
        <div class="login-top">
            <ul class="layui-nav">
                <li class="layui-nav-item layui-this">
                    <a href="javascript:;" class="login-way" data-way="sms">验证码登录</a>
                </li>
                <span lay-separator="" style="margin: 15px;color: #f2f2f2;top: 35px;position: sticky;">|</span>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="login-way" data-way="pass">密码登录</a>
                </li>
            </ul>
        </div>
        <form class="layui-form login-bottom sms-login" lay-filter="val-filter">
            <div class="center layui-input-xl">
                <div class="layui-form-item layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-cellphone"></i>
                    </div>
                    <input type="text" class="layui-input phone" name="mobile" lay-verify="required|phone" lay-vertype="tips" lay-reqtext="请输入手机号" placeholder="输入手机号" maxlength="11">
                </div>
                <div class="layui-form-item" id="validatePanel">
                    <div style="width: 160px;">
                        <input type="text" class="layui-input captcha" name="captcha" placeholder="输入图形验证码" lay-verify="required" lay-reqtext="请输入图形验证码" lay-vertype="tips" maxlength="4">
                    </div>
                    <img class="validateImg" src="/login/captcha" onclick="this.src='/login/captcha?seed='+Math.random()">
                </div>
                <div class="layui-form-item">
                    <input type="text" name="verify_code" lay-verify="required" lay-vertype="tips" lay-reqtext="请输入验证码" placeholder="输入验证码" value="" class="layui-input" maxlength="6"> 
                    <button type="button" class="layui-btn layui-btn-primary vercode" id="get-vercode">获取验证码</button>
                </div>
            </div>
            <div class="layui-form-item" style="text-align:center;">
                <button class="login-btn" lay-filter="sms_login" lay-submit="">登录 / 注册</button>
            </div>
            <div class="tip">
                <input type="checkbox" name="agree" value="1">
                <p>注册/登录即代表您已同意{:request()->pc_info['store_name']}<a href="/login/agreement?type=1" target="_blank">《隐私协议》</a><a href="/login/agreement?type=2" target="_blank">《用户协议》</a></p>
            </div>
        </form>
        <form class="layui-form login-bottom pass-login" style="display: none;">
            <div class="center layui-input-xl">
                <div class="layui-form-item layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-cellphone"></i>
                    </div>
                    <input type="text" class="layui-input" name="mobile" lay-verify="required" lay-reqtext="请输入手机号" placeholder="输入手机号" maxlength="11">
                </div>
                <div class="layui-form-item layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" class="layui-input" name="password" lay-verify="required" lay-reqtext="请输入密码" placeholder="输入密码" maxlength="20" lay-affix="eye">
                </div>
                <div class="layui-form-item" id="validatePanel">
                    <div style="width: 160px;">
                        <input type="text" class="layui-input" name="captcha" placeholder="输入图形验证码" lay-verify="required" lay-reqtext="请输入图形验证码" lay-vertype="tips" maxlength="4">
                    </div>
                    <img class="validateImg" src="/login/captcha" onclick="this.src='/login/captcha?seed='+Math.random()">
                </div>
            </div>
            <div class="layui-form-item" style="text-align:center;">
                <button class="login-btn" lay-filter="pass_login" lay-submit="">立即登录</button>
            </div>
            <div class="tip">
                <input type="checkbox" name="agree" value="1">
                <p>注册/登录即代表您已同意{:request()->pc_info['store_name']}<a href="/login/agreement?type=1" target="_blank">《隐私协议》</a><a href="/login/agreement?type=2" target="_blank">《用户协议》</a></p>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    layui.use(['form','jquery'], function () {
        var form = layui.form, $ = layui.jquery, layer = layui.layer;

        // 切换登录方式
        $(".login-way").click(function(){
            var way = $(this).data('way');
            console.log(way)
            if (way == 'sms') {
                $(".sms-login").show();
                $(".pass-login").hide();
            } else {
                $(".pass-login").show();
                $(".sms-login").hide();
            }
        })

        // 发送短信验证码
        $("#get-vercode").on('click',function(){
            var time = 60; // 倒计时时间
            var that = this;
            if(time == 60){
                var phone_valid = form.validate('.phone'); // 主动触发验证，v2.7.0 新增 
                // 验证通过
                if(phone_valid){
                    var captcha_valid = form.validate('.captcha');
                    if (captcha_valid)  {
                        var formData = form.val('val-filter');
                        if (formData.agree == undefined) {
                            layer.msg('请勾选协议',{icon: 7, time: 2000});
                            return false;
                        }
                        
                        var loading = layer.msg('验证码发送中..', {icon: 16,shade: 0.3,time: false});
                        $.ajax({
                            url:'/login/send_verify_code',
                            type:'post',
                            data:formData,
                            dataType:"JSON",
                            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                            success:function(res){
                                layer.close(loading);  //返回数据关闭loading
                                if(res.code == 0){
                                    layer.msg(res.msg,{icon: 1,time:1500},function(){
                                        // 启动倒计时
                                        $(that).prop('disabled', true);
                                        var timer = setInterval(function(){
                                            if (time == 0) {
                                                clearInterval(timer);
                                                $(that).prop('disabled', false);
                                                $(that).text('重新获取');
                                                time = 60; // 重置时间
                                            } else {
                                                $(that).text('（'+time+'）' + '秒后重新发送');
                                                time--;
                                            }
                                        }, 1000);
                                    });  
                                } else{
                                    captchacheng();
                                    layer.msg(res.msg,{icon: 2, time: 2000});
                                }
                            },
                            error:function(e){
                                layer.close(loading);
                                layer.msg('请求失败'+e.responseText,{icon: 2});
                            },
                        });
                    }
                }
            }
        });

        // 使用短信验证码登录
        form.on('submit(sms_login)', function (data) {
            var loading = layer.msg('数据校验中..', {icon: 16,shade: 0.3,time: false});
            data = data.field;
            $.ajax({
                url:"/login/sms_login",
                type:'post',
                data:data,
                dataType:'JSON',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.close(loading);
                    if(res.code==0){
                        layer.msg(res.msg,{icon: 1,time: 2000},function(){
                            var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                            parent.layer.close(index);//关闭窗口  
                            parent.location.reload();
                        });
                    }else{
                        layer.msg(res.msg,{icon: 2,time: 2000});
                    }
                },
                error:function(e){
                    layer.close(loading);
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
            });
            return false;
        });

        // 使用密码登录
        form.on('submit(pass_login)', function (data) {
            data = data.field;
            if (data.agree == undefined) {
                layer.msg('请勾选协议',{icon: 7, time: 2000});
                return false;
            }
            var loading = layer.msg('数据校验中..', {icon: 16,shade: 0.3,time: false});
            $.ajax({
                url:"/login/index",
                type:'post',
                data:data,
                dataType:'JSON',
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.close(loading);
                    if(res.code==0){
                        layer.msg(res.msg,{icon: 1,time: 2000},function(){
                            var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的name
                            parent.layer.close(index);//关闭窗口  
                            parent.location.reload();
                        });
                    }else{
                        captchacheng();
                        layer.msg(res.msg,{icon: 2,time: 2000});
                    }
                },
                error:function(e){
                    layer.close(loading);
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
            });
            return false;
        });

        //刷新验证码
        function captchacheng(){
            $(".validateImg").attr('src','/login/captcha?seed='+Math.random());
        }

    });
</script>